import React from "react";
import { TabBar } from "antd-mobile";
import {withRouter} from "react-router-dom"

class TabBarExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: "redTab",
            hidden: false,
            fullScreen: true,
        };
    }

    render() {
        return (
        <div
            style={
            this.state.fullScreen
                ? { position: "fixed", height: "100%", width: "100%", top: 0 }
                : { height: 400 }
            }
        >
        <TabBar
            unselectedTintColor="#949494"
            tintColor="#ff2d4a"
            barTintColor="white"
            hidden={this.state.hidden}
        >
        <TabBar.Item
            title="首页"
            key="index"
            icon={<i className="iconfont icon-shouye"></i>}
            selectedIcon={
                <i
                    className="iconfont icon-shouye"
                    style={{ color: "#ff2d4a" }}
                ></i>
            }
            selected={this.props.location.pathname==="/"}
            onPress={() => {
                this.props.history.push("/");
            }}
        >
            {this.props.children}
        </TabBar.Item>
        <TabBar.Item
            icon={<i className="iconfont icon-fenlei"></i>}
            selectedIcon={
                <i
                    className="iconfont icon-fenlei"
                    style={{ color: "#ff2d4a" }}
                ></i>
            }
            title="分类"
            key="classify"
            selected={this.props.location.pathname==="/classify"}
            onPress={() => {
                this.props.history.push("/classify");
            }}
        >
        {this.props.children}
        </TabBar.Item>
        <TabBar.Item
            icon={<i className="iconfont icon-gouwuche"></i>}
            selectedIcon={
                <i
                    className="iconfont icon-gouwuche"
                    style={{ color: "#ff2d4a" }}
                ></i>
            }
            title="购物车"
            key="cart"
            selected={this.props.location.pathname==="/cart"}
            onPress={() => {
                this.props.history.push("/cart");
            }}
        >
        {this.props.children}
        </TabBar.Item>
        <TabBar.Item
            icon={<i className="iconfont icon-wode"></i>}
            selectedIcon={
                <i
                    className="iconfont icon-wode"
                    style={{ color: "#ff2d4a" }}
                ></i>
            }
            title="我的"
            key="my"
            selected={this.props.location.pathname==="/my"}
            onPress={() => {
                this.props.history.push("/my")
            }}
        >
        {this.props.children}
        </TabBar.Item>
        </TabBar>
    </div>
    );
}
}


export default withRouter(TabBarExample)